import React, { Component } from 'react';
import CityStyled from './citygroupstyled';
import Title from '../../components/title/title';
import InputCity from '../../components/inputcity/inputcity';
// import StopType from '../../components/stoptype/stoptype';
import axios from 'axios';
import store from '../../store/index'
export default class citygroup extends Component {
    constructor(props){
        super(props);
        this.state={
            name:"",
            phone:"",
            email:"",
            city:"西安市雁塔区",
            stoptype:"立体停车场",
            address:"小寨",
            stopnum:"300",
            loop:false
        }
    }
    addmsg=()=>{
        this.setState({
            name:this.inputname.value,
            phone:this.inputemail.value,
            city:store.getState().city,
            stoptype:this.inputstoptype.value,
            address:this.inputadress.value,
            stopnum:this.inputstopnum.value
        },()=>{
            axios({
                url:"http://localhost:4000/userlist",
                method:"post",
                data:{
                    "name":this.state.name,
                    "phone":this.state.phone,
                    "city":this.state.city,
                    "stoptype":this.state.stoptype,
                    "address":this.state.address,
                    "stopnum":this.state.stopnum,
                }
            }).then((res)=>{
                console.log(res);
                this.setState({
                    loop:true
                })
            })
        });
    }
    funa=(val)=>{
        console.log(val);
    }
    render() {
        return (
            <div>
                <CityStyled>
                    {/* 头部图片栏 */}
                    <header>
                        <img src="citygroup/cshhr_banner_wap.bc62e8a.png" alt=""/>
                    </header>
                    <section>
                        {/* 合伙人条件栏 */}
                        <div  className="groupfactor">
                            <Title><span>合伙人条件</span></Title>{/* 组件插槽 */}
                            <img src="citygroup/cshhr_img.png" alt=""/>
                            <div className="groupfactortext">
                                <ul>
                                    <li>
                                        <h4>政府资源</h4>
                                        <p>城市合伙人有良好的可影响和决策智慧停车项目落地的政府相关关系资源，对政府项目运作流程非常熟悉。</p>
                                    </li>
                                    <li>
                                        <h4>行业资源</h4>
                                        <p>城市合伙人掌握相关城市停车项目资源；有较强的市场开拓及公关能力</p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        {/* 合作方式 */}
                        <div className="handsway">
                            <Title><span>合作方式</span></Title>
                            <div className="handswaybox">
                                <img src="citygroup/hands-way2.jpg" alt=""/>
                                <p>停车项目投资运营</p>
                                <ul>
                                    <li>盘古美天以<span>投资运营商</span>为角色，负责项目的投资、建设、运营。</li>
                                    <li>城市合伙人以<span>项目合伙商</span>为角色，负责项目前期的客户关系，促成项目成功中标签约。</li>
                                    <li>城市合伙人每年获取项目运营<span>分红</span>或者项目<span>佣金</span>一次性回报</li>
                                    <li>分红比例、佣金回报根据不同项目的<span>收益回报率</span>，由双方协商确定。</li>
                                </ul>
                            </div>
                            <div className="handswaybox">
                                <img src="citygroup/hands-way1.jpg" alt=""/>
                                <p>停车项目工程实施</p>
                                <ul>
                                    <li>盘古美天以<span>工程实施商</span>为角色，负责项目工程的建设和运维</li>
                                    <li>城市合伙人以<span>项目合伙商</span>为角色，负责项目前期的客户关系，促成项目成功中标签约</li>
                                    <li>城市合伙人获取项目<span>佣金</span>一次性回报</li>
                                    <li>佣金回报根据不同项目的<span>中标价格</span>，由双方协商确定</li>
                                </ul>
                            </div>
                        </div>
                        {/* 合作支持 */}
                        <div className="support">
                            <Title><span>合作支持</span></Title>
                            <div className="supportbig">
                                <div className="supportsmall">
                                    <img src="citygroup/1.png" alt=""/>
                                    <div>
                                        <p>平台支持</p>
                                        <b>美天停车APP提供全方面的平台支持</b>
                                    </div>
                                </div>
                                <div className="supportsmall">
                                    <img src="citygroup/2.png" alt=""/>
                                    <div>
                                        <p>技术支持</p>
                                        <b>总部对合伙人开放后台数据管理系统</b>
                                    </div>
                                </div>
                                <div className="supportsmall">
                                    <img src="citygroup/3.png" alt=""/>
                                    <div>
                                        <p>资金支持</p>
                                        <b>东赢恒康集团、基金及合作金融机构将给予项目提供资金支持</b>
                                    </div>
                                </div>
                                <div className="supportsmall">
                                    <img src="citygroup/4.png" alt=""/>
                                    <div>
                                        <p>运营支持</p>
                                        <b>根据合伙人签约城市、市场实际情况制定符合当地的运营方案</b>
                                    </div>
                                </div>
                                <div className="supportsmall">
                                    <img src="citygroup/5.png" alt=""/>
                                    <div>
                                        <p>风险控制</p>
                                        <b>对合伙人签约城市运营数据时时监测、规避企业运营风险</b>
                                    </div>
                                </div>
                                <div className="supportsmall">
                                    <img src="citygroup/6.png" alt=""/>
                                    <div>
                                        <p>资源共享</p>
                                        <b>提供更多流量接口及平台</b>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {/* 加入我们 */}
                        <div className="addour">
                            <Title><span>加入我们</span></Title>
                            <div className="addourcontent">
                                <img className="liuchengimg" src="citygroup/liucheng.jpg" alt=""/>  
                                <img src="citygroup/cshhr_img_join.png" alt=""/>
                                <div className="addourmsg">
                                    <ul>
                                        <li>联系人：<input type="text" ref={(text)=>{this.inputname=text}}/></li>
                                        <li>电话：<input type="text" ref={(text)=>{this.inputphone=text}}/></li>
                                        <li>邮箱：<input type="text" ref={(text)=>{this.inputemail=text}}/></li>
                                        <li>城市：<InputCity cityData={this.funa}></InputCity></li>
                                        <li>停车场类型：
                                            <select ref={(text)=>{this.inputstoptype=text}}>
                                                <option value="露天开放式停车场">露天开放式停车场</option>
                                                <option value="地下封闭式停车场" checked>地下封闭式停车场</option>
                                                <option value="立体停车场">立体停车场</option>
                                            </select> 
                                        </li>
                                        <li>停车场地址：<input type="text" ref={(text)=>{this.inputadress=text}}/></li>
                                        <li>停车数量：<input type="text" ref={(text)=>{this.inputstopnum=text}}/></li>
                                    </ul>
                                    <div className="buttonbox">
                                        <button onClick={this.addmsg}>提交</button>
                                        <span style={{visibility:this.state.loop?"visible":"hidden"}}>提交成功</span>
                                    </div>
                                    
                                </div>
                            </div>
                        </div>
                        {/* 联系我们 */}
                        <div className="callour">
                            <Title><span>联系我们</span></Title>
                            <img src="citygroup/consult-map.png" alt=""/>
                            <p>重庆盘古美天物联网科技有限公司</p>
                            <h4>地址：重庆市江北区江北嘴金融城2号T1栋16层</h4>
                            <span>电话：4000056608</span>
                        </div>
                    </section>

                </CityStyled>
            </div>
        )
    }
}
